---
title: Toggle Group
description: Provides a shared state to a series of toggle buttons.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-base-toggle-group" />

## Installation

<ComponentInstallation name="components-base-toggle-group" />

## Usage

```tsx
<ToggleGroup defaultValue={['bold']}>
  <Toggle value="bold" />
  <Toggle value="italic" />
  <Toggle value="underline" />
</ToggleGroup>
```

## API Reference

### ToggleGroup

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://animate-ui.com/docs/components/base/toggle-group#togglegroup"
    text="Animate UI API Reference - ToggleGroup"
  />

  <ExternalLink
    href="https://base-ui.com/react/components/toggle-group#api-reference"
    text="Base UI API Reference - ToggleGroup"
  />
</div>

<TypeTable
  type={{
    variant: {
      description: 'The variant of the ToggleGroup component.',
      type: '"default" | "outline"',
      required: false,
    },
    size: {
      description: 'The size of the ToggleGroup component.',
      type: '"default" | "sm" | "lg" | "icon"',
      required: false,
    },
  }}
/>

### Toggle

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://animate-ui.com/docs/components/base/toggle-group#toggle"
    text="Animate UI API Reference - Toggle"
  />

  <ExternalLink
    href="https://base-ui.com/react/components/toggle#api-reference"
    text="Base UI API Reference - Toggle"
  />
</div>

<TypeTable
  type={{
    variant: {
      description: 'The variant of the Toggle component.',
      type: '"default" | "outline"',
      required: false,
    },
    size: {
      description: 'The size of the Toggle component.',
      type: '"default" | "sm" | "lg" | "icon"',
      required: false,
    },
    '...props': {
      description: 'The props of the Toggle component.',
      type: 'HTMLMotionProps<"button">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `render` property is not supported in the `Toggle` component, as it is
  used for animation.
</Callout>

## Credits

- [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group)
